import { Dropdown } from "antd";
import type { ItemType, MenuItemType } from "antd/es/menu/interface";
import { EllipsisVerticalIcon } from "lucide-react";
import { useState, type Key } from "react";
import type { IDepartment } from "~/types/manage/system/user";
import { cn } from "~/utils/ui.util";

type TDropdownMenuKey = "add" | "edit" | "delete";

export interface Props {
  node: IDepartment;
  selectTreeKeys: Key[];
  onAdd?: (department: IDepartment) => void;
  onEdit?: (department: IDepartment) => void;
  onDelete?: (departmentId: number) => void;
}

export default function TreeTitleRender(props: Props) {
  const { node, selectTreeKeys } = props;
  const [activeNodeKey, setActiveNodeKey] = useState<React.Key | null>(null);

  const _ui: {
    dropdownMenuItems: ItemType[];
  } = {
    dropdownMenuItems: [
      {
        label: "添加子部门",
        key: "add",
      },
      {
        label: "编辑",
        key: "edit",
      },
      {
        type: "divider",
      },
      {
        label: <div className="text-red-500">删除</div>,
        key: "delete",
      },
    ],
  };

  const _handler: {
    onDropdownMenuClick: MenuItemType["onClick"];
  } = {
    onDropdownMenuClick: (e) => {
      e.domEvent.stopPropagation();
      const key = e.key as TDropdownMenuKey;
      switch (key) {
        case "add":
          props.onAdd?.(node);
          break;
        case "edit":
          props.onEdit?.(node);
          break;
        case "delete":
          props.onDelete?.(node.id);
          break;
        default:
          break;
      }
    },
  };

  return (
    <div
      className={cn(
        "group/item flex h-10 items-center justify-between gap-1 px-2 py-1",
        {
          "bg-gray-200":
            activeNodeKey === node.key || selectTreeKeys.includes(node.key),
          "hover:bg-gray-100": !selectTreeKeys.includes(node.key),
          "bg-gray-100":
            activeNodeKey === node.key && !selectTreeKeys.includes(node.key),
        },
      )}
      // title={activeNodeKey === node.key ? node.key : undefined}
    >
      <p className="flex-1 overflow-hidden text-ellipsis">{node.name}</p>
      {/* <div>
        <span className="text-gray-400">
          {node.children && `(${node.children.length}人)`}
        </span>
      </div> */}
      <Dropdown
        menu={{
          onClick: _handler.onDropdownMenuClick,
          items: _ui.dropdownMenuItems,
        }}
        arrow={true}
        open={activeNodeKey === node.key}
        onOpenChange={(open) => {
          setActiveNodeKey(open ? node.key : null);
        }}
      >
        <div
          className={cn(
            "invisible w-0 rounded p-1 opacity-0 transition-all duration-300 ease-in-out hover:bg-white",
            {
              "!visible !w-[24px] !opacity-100":
                activeNodeKey === node.key || selectTreeKeys.includes(node.key),
              "!bg-white": activeNodeKey === node.key,
              "group-hover/item:visible group-hover/item:w-[24px] group-hover/item:opacity-100":
                activeNodeKey !== node.key,
            },
          )}
          onClick={(e) => {
            e.stopPropagation();
          }}
        >
          <EllipsisVerticalIcon size={16} />
        </div>
      </Dropdown>
    </div>
  );
}
